<h1>Signup</h1>

<div class="row">
  <form method="POST" action="/auth/signup" class="col s12">
    <div class="row">
      <div class="input-field col s6">
        <input id="firstname" type="text" class="validate" name="firstname" value="<%= data.firstname %>">
        <label for="firstname">First Name</label>
      </div>
      <div class="input-field col s6">
        <input id="lastname" type="text" class="validate" name="lastname" value="<%= data.lastname %>">
        <label for="lastname">Last Name</label>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s4">
        <input id="email" type="email" class="validate" name="email" value="<%= data.email %>">
        <label for="email">Email</label>
      </div>
      <div class="input-field col s4">
        <input id="username" type="text" class="validate" name="username" value="<%= data.username %>">
        <label for="username">Display Name</label>
      </div>
      <div class="input-field col s4">
        <input id="birthdate" type="text" class="datepicker validate" name="birthdate" value="<%= data.birthdate %>">
        <label for="birthdate">Birth Date</label>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s12">
        <input id="photoUrl" type="url" class="validate" name="photoUrl" value="<%= data.photoUrl %>">
        <label for="photoUrl">Profile Pic</label>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s6">
        <input id="password" type="password" class="validate" name="password">
        <label for="password">Password</label>
      </div>
      <div class="input-field col s6">
        <input id="password_verify" type="password" class="validate" name="password_verify">
        <label for="password_verify">Password Verify</label>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s12">
        <textarea id="bio" class="validate materialize-textarea" name="bio"><%= data.bio %></textarea>
        <label for="bio">User Bio</label>
      </div>
    </div>
    <button class="btn waves-effect waves-light teal lighten-3" type="submit">Sign Up
      <i class="material-icons right">send</i>
    </button>
  </form>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    let elems = document.querySelectorAll('.datepicker')
    let startDate = new Date()
    startDate.setFullYear(startDate.getFullYear() - 30)

    let instances = M.Datepicker.init(elems, {
      autoClose: true,
      defaultDate: startDate,
      minYear: startDate.getFullYear() - 70,
      maxYear: (new Date()).getFullYear()
    })
  })
</script>
